<template>
    <div class="status-detail">
        <el-input v-model="searchName" placeholder="请输入学号"></el-input>
        <el-button type="primary" @click="getselectStuid">查询</el-button>
        <el-button type="primary" @click="addStuPunishment">新增</el-button>
        <el-table :data="tableData" border class="container_wrap">
            <el-table-column prop="stuid" label="学号" width="150">
            </el-table-column>
            <el-table-column prop="stuname" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="punishment_name" label="处分等级" width="180">
            </el-table-column>
            <el-table-column prop="reason" label="处分原因" width="250">
            </el-table-column>
            <el-table-column prop="rec_time" :formatter="dateFormat" width="180" label="处分时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" icon="el-icon-edit"
                        @click="editCourseInfo(scope.$index, scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog width="500px" :title="dialogTitle" :visible.sync="dialogEditVisible">
            <el-form :model="form">
                <el-form-item label="学号" :label-width="formLabelWidth">
                    <el-input v-model="form.stuid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.stuname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处分等级" :label-width="formLabelWidth">
                    <el-select v-model="form.punishment_name" filterable clearable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="处分原因" :label-width="formLabelWidth">
                    <el-input v-model="form.reason" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="处分时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.rec_time" format="MM-dd" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitpunishmentInfo">确 定</el-button>
            </div>
        </el-dialog>

        <div class="pagination">
            <Pagination :pageCount="pagiDataAll" @cpnPageJumpTo="currentChange"></Pagination>
        </div>
    </div>
</template>

<script>
import Search from "@/components/search/Search.vue";
import Pagination from "@/components/pagination";
import {
    selectpunishmentByStuid,
    selectallpunishmentInfo,
    addpunishmentInfo,
    updatepunishmentInfo,
    deletepunishment
} from "@/api/request";

export default {
    name: "punishment",
    components: {
        Search,
        Pagination,
    },
    created() {
        // 获取第0页学生信息
        this.getStudentMes();
    },
    data() {
        return {
            tableData: [],
            pagiDataAll: 0,
            // 设置flg，stu表示数据来源当前页面，name表示来自子组件searchname
            currentpage: "stu",
            searchName: "",
            dialogEditVisible: false,
            // punishData
            punishData: {},
            // 当前行学生信息
            stuBaseInfo: {},
            dialogTitle: "",
            formLabelWidth: '120px',
            options: [{
                value: '0',
                label: '警告'
            }, {
                value: '1',
                label: '严重警告'
            }, {
                value: '2',
                label: '记过'
            }, {
                value: '3',
                label: '记大过'
            }, {
                value: '4',
                label: '留校察看'
            }, {
                value: '5',
                label: '开除'
            }
            ],
            form: {
                id: 0,
                stuid: '',
                stuname: '',
                punishment_name: '',
                reason: '',
                rec_time: ''
            },
        };
    },

    mounted() {
        // console.log(this.tableData);
    },
    computed: {
        getpagiDataAll() {
            return this.pagiDataAll;
        },
    },
    methods: {
        //修改学生处分信息
        editCourseInfo(index, row) {
            this.dialogTitle = "修改学生处分信息"
            console.log(index, row);
            this.form.id = row.id;
            this.form.stuid = row.stuid;
            this.form.stuname = row.stuname;
            this.form.punishment_name = row.punishment_name;
            this.form.reason = row.reason;
            this.form.rec_time = row.rec_time;
            this.dialogEditVisible = true;
        },
        //新增学生处分信息
        addStuPunishment() {
            this.dialogTitle = "新增学生处分信息"
            this.form.id = ''
            this.form.stuid = ''
            this.form.stuname = ''
            this.form.punishment_name = ''
            this.form.reason = ''
            this.form.rec_time = ''
            this.dialogEditVisible = true;
        },
        //提交学生处分信息
        submitpunishmentInfo() {
            var data = { id: this.form.id, stuid: this.form.stuid, stuname: this.form.stuname, punishment_name: this.form.punishment_name, reason: this.form.reason, rec_time: this.form.rec_time };
            console.log(data);
            if (this.dialogTitle == "新增学生处分信息") {
                addpunishmentInfo(data).then((res) => {
                    this.dialogEditVisible = false;
                    this.$message({
                        type: "success",
                        message: "新增成功!",
                    });
                    this.getStudentMes();
                });
            } else {
                updatepunishmentInfo(data).then((res) => {
                    this.dialogEditVisible = false;
                    this.$message({
                        type: "success",
                        message: "修改成功!",
                    });
                    this.getStudentMes();
                });
            }
        },
        // 删除学生处分信息
        handleDelete(index, row) {
            this.$confirm("确认删除？")
                .then(() => {
                    console.log(index, row);
                    deletepunishment(row)
                        .then(() => {
                            // this.getStudentMes();
                            location.reload()
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        })
                        .catch((err) => {
                            this.$message.error("删除失败!");
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 3.请求搜索id
        getselectStuid() {
            var stuid = this.searchName;
            var page = 0;
            selectpunishmentByStuid(stuid, page).then((res) => {
                this.pagiDataAll = res.data.pageAll;
                // console.log(res);
                let result = res.data.data;

                // 清空数组
                this.tableData.splice(0);
                this.tableData.push(...result);
            });
        },

        /**
         * 数据请求
         */
        // 1.获取奖项列表
        getStudentMes(page = 0) {
            // 请求
            selectallpunishmentInfo(page).then((res) => {
                this.pagiDataAll = res.data.pageAll;
                // console.log(res);
                let result = res.data.data;

                // 过滤属性值为null的
                // this.resFilter(result);
                // 清空数组
                this.tableData.splice(0);
                this.tableData.push(...result);
            });
        },
        /**
         * 操作
         */
        // 对表格数据的日期进行格式化
        dateFormat(row, column) {
            const daterc = row[column.property];
            const timeFormat = daterc.split('T')[0]
            return timeFormat;
        },
        // 分页跳转，获取学生信息
        currentChange(item) {
            // stu页面
            if (this.currentpage === "stu") {
                this.getStudentMes(item - 1);
            }
            if (this.currentpage === "name") {
                this.getselectStuName(this.searchName, item - 1);
            }
            if (this.currentpage === "studentid") {
                this.getselectStuid(this.searchName, item - 1);
            }
        },
    },
};
</script>
<style lang='scss' scoped>
.el-date-picker {
    width: 200px;
    margin-right: 30px;
    margin-left: 30px;
}

.el-select {
    width: 200px;
    margin-right: 30px;
    margin-left: 30px;
}

.el-input {
    width: 200px;
    margin-right: 30px;
    margin-top: 10px;
    margin-left: 30px;
}

.pagination {
    text-align: center;
    margin-top: 15px;
}

.name-wrapper {
    .el-tag {
        cursor: pointer;
    }
}
</style>